<script setup lang="ts">
import { onMounted, Ref, ref, watch, shallowRef, computed, nextTick } from 'vue'
import { Message, Modal, Notification, Spin, Divider, Image } from '@arco-design/web-vue'
import {
  IconFullscreen,
  IconFullscreenExit,
  IconClockCircle,
  IconUser,
  IconCalendar,
  IconEdit,
  IconFile,
  IconAttachment,
  IconPlus,
  IconEye,
  IconDownload,
  IconDelete,
  IconMessage,
  IconHistory,
  IconFaceSmileFill,
  IconAt,
  IconCheck,
  IconClose,
  IconCheckCircleFill,
  IconApps
} from '@arco-design/web-vue/es/icon'
import { PRIORITY_CONFIG, getTaskPriorityColor, getPriorityLabel } from '@/constants/Priority'
import {
  COMPLETE_STATUS_CONFIG,
  getCompleteStatus,
  getCompleteColor,
  getCompleteIcon
} from '@/constants/CompleteStatus'
import dayjs from 'dayjs'
import {
  addRequirementCommentUsingPost,
  pageRequirementCommentUsingPost,
  deleteRequirementCommentUsingDelete
} from '@/api/requirementCommentsController'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig, IDomEditor } from '@wangeditor/editor'
import { editorConfig, editorStyle } from '@/composables/useEditorConfig'
import { getMembersUsingGet, getProjectUsingGet } from '@/api/projectController'
import { getMilestoneUsingGet } from '@/api/milestoneController'
import { getIterationUsingGet, updateIterationUsingPut } from '@/api/iterationController'
import {
  getRequirementUsingGet,
  updateRequirementUsingPut,
  pageReqDynamicUsingPost
} from '@/api/requirementController'
import {
  addAttacheUsingPost,
  deleteAttacheUsingDelete,
  pageAttachesUsingPost
} from '@/api/attacheController'
import { uploadFileUsingPost } from '@/api/fileController'
import { getFileIcon, formatFileSize, getFileType, downloadFile, isImageFile } from '@/utils/file'
import { useFilePreview } from '@/composables/useFilePreview'
import TaskView from '@/components/tasks/TaskView.vue'
// 附件预览 （composiables 代码复用）
const { previewVisible, previewFile, handlePreview, closePreview } = useFilePreview()
//emoji
import '@/composables/emojiConfig'
import { emojiIndex, Picker } from '@/composables/emojiConfig'
import { useUserStore } from '@/store/index'
const userStore = useUserStore()

defineOptions({
  name: 'IterationView'
})
// Props定义
const props = defineProps<{
  visible: boolean
  iterationId: number | null
}>()

// Emits定义
const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
  (e: 'close', reqId: number): void
}>()
//全屏控制
const fullscreen = ref(false)
// 迭代数据
const iteration = ref<API.IterationVo>({})

// #region 编辑迭代内容
const updateIterationRequest: Ref<API.UpdateIterationRequest> = ref({
  id: (props.iterationId as number) || undefined,
  proId: (iteration.value.proId as number) || undefined,
  mileId: (iteration.value.mileId as number) || undefined,
  title: '',
  description: '',
  remark: '',
  status: 0,
  priority: 0,
  startTime: '',
  endTime: ''
})
// 添加标题编辑相关的状态和方法
const isEditingTitle = ref(false)
const editedTitle = ref('')

// 开始编辑标题
const startEditTitle = () => {
  editedTitle.value = iteration.value?.title || ''
  isEditingTitle.value = true
}

// 保存标题
const handleTitleChange = async () => {
  if (!editedTitle.value.trim()) {
    Message.warning('标题不能为空')
    editedTitle.value = iteration.value?.title || ''
    return
  }

  // 重置更新请求对象,只保留必要参数
  updateIterationRequest.value = {
    id: iteration.value.id, // 保留迭代ID
    title: editedTitle.value, // 只设置要更新的标题
    mileId: -1
  }

  try {
    const res: any = await updateIterationUsingPut(updateIterationRequest.value)
    if (res.code === 0) {
      await getIterationData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
    editedTitle.value = iteration.value?.title || ''
  } finally {
    isEditingTitle.value = false
  }
}
// 编辑器实例
const descriptionEditor = shallowRef()

// 添加描述编辑状态和临时内容
const isEditingDescription = ref(false)
const tempDescription = ref('')

// 开始编辑描述
const startEditDescription = () => {
  tempDescription.value = iteration.value.description || ''
  isEditingDescription.value = true
}

// 取消编辑描述
const cancelEditDescription = () => {
  isEditingDescription.value = false
  tempDescription.value = ''
}

// 保存描述
const saveDescription = async () => {
  // 重置更新请求对象,只保留必要参数
  updateIterationRequest.value = {
    id: iteration.value.id, // 保留迭代ID
    description: tempDescription.value, // 只设置要更新的描述
    mileId: -1
  }

  try {
    const res: any = await updateIterationUsingPut(updateIterationRequest.value)
    if (res.code === 0) {
      await getIterationData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  } finally {
    isEditingDescription.value = false
    cancelEditDescription()
  }
}
// 添加备注相关的状态控制
const isEditingRemark = ref(false)
const isRemarkFullscreen = ref(false)
const tempRemark = ref('')
const remarkEditor = shallowRef()

// 备注编辑相关方法
const startEditRemark = () => {
  tempRemark.value = iteration.value.remark || ''
  isEditingRemark.value = true
}

const cancelEditRemark = () => {
  isEditingRemark.value = false
  tempRemark.value = ''
}

const saveRemark = async () => {
  // 重置更新请求对象,只保留必要参数
  updateIterationRequest.value = {
    id: iteration.value.id, // 保留迭代ID
    remark: tempRemark.value, // 只设置要更新的备注
    mileId: -1
  }

  try {
    const res: any = await updateIterationUsingPut(updateIterationRequest.value)
    if (res.code === 0) {
      await getIterationData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  } finally {
    isEditingRemark.value = false
    cancelEditRemark()
  }
}
// #endregion
// #region 全屏相关
// 添加描述全屏状态控制
const isDescriptionFullscreen = ref(false)

// 切换描述全屏状态
const toggleDescriptionFullscreen = () => {
  isDescriptionFullscreen.value = !isDescriptionFullscreen.value
}

// 备注全屏控制
const toggleRemarkFullscreen = () => {
  isRemarkFullscreen.value = !isRemarkFullscreen.value
}

//项目成员列表
const projectMembers = ref<API.UserVO[]>([])
const getProjectMembers = async () => {
  const res: any = await getMembersUsingGet({ id: iteration.value.proId })
  if (res.code === 0) {
    projectMembers.value = res.data
  } else {
    Message.error(res.message)
  }
}
// #region 关联项目、里程碑
//获取关联项目
const projectOwner = ref<API.UserVO>({})
const relatePro = ref<API.ProjectVo>({})
const getRelatePro = async () => {
  const res: any = await getProjectUsingGet({ id: iteration.value.proId })
  if (res.code === 0) {
    relatePro.value = res.data
    projectOwner.value = relatePro.value.owner || {}
    useableRelateMilestones.value = relatePro.value.mileStoneVoList || []
  } else {
    Message.error(res.message)
  }
}
//获取关联里程碑
const relateMile = ref<API.MileStoneVo>({})
const getRelateMile = async () => {
  const res: any = await getMilestoneUsingGet({ id: iteration.value.mileId })
  if (res.code === 0) {
    relateMile.value = res.data
  } else {
    Message.error(res.message)
  }
}
//实现关联里程碑修改逻辑(getIterationData执行后赋予初值)
const relateMilestoneId = ref<number | null>(null)
const useableRelateMilestones = ref<API.MileStoneVo[]>([])
watch(relateMilestoneId, (newRelateMilestoneId) => {
  if (newRelateMilestoneId == null) {
    return // 提前返回，避免后续操作
  }
  // 确保 relatePro.value 和 mileStoneVoList 存在
  if (relatePro.value?.mileStoneVoList) {
    // 获取可用的里程碑列表
    useableRelateMilestones.value = relatePro.value.mileStoneVoList || []

    // 获取当前里程碑
    const currentMilestone = useableRelateMilestones.value.find(
      (milestone) => milestone.id === newRelateMilestoneId
    )
  }
})
const handleChangeRelation = async () => {
  try {
    updateIterationRequest.value.id = iteration.value.id
    if (relateMilestoneId.value == null) {
      updateIterationRequest.value.mileId = -1 as number
    } else {
      updateIterationRequest.value.mileId = relateMilestoneId.value as number
    }
    const res: any = await updateIterationUsingPut(updateIterationRequest.value)
    if (res.code === 0) {
      await getIterationData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  }
}
//#endregion

// #region 时间 相关
const getTimeRange = computed(() => {
  // 默认允许所有时间
  const defaultRange = {
    start: null,
    end: null
  }
  try {
    // 按优先级检查并设置范围
    if (relateMile.value && relateMile.value.startTime && relateMile.value.endTime) {
      return {
        start: relateMile.value.startTime,
        end: relateMile.value.endTime
      }
    }
    if (relatePro.value && relatePro.value.startTime && relatePro.value.endTime) {
      return {
        start: relatePro.value.startTime,
        end: relatePro.value.endTime
      }
    }
  } catch (error) {
    console.error('计算时间范围出错:', error)
  }

  return defaultRange
})

// 日期选择器的 disabled-date 判断逻辑
const isDateDisabled = (current: Date | null) => {
  if (!current) return false

  const range = getTimeRange.value
  // 如果没有限制范围，则允许选择任何日期
  if (!range.start || !range.end) return false

  try {
    const currentDate = dayjs(current)
    const startDate = dayjs(range.start)
    const endDate = dayjs(range.end)

    return currentDate.isBefore(startDate, 'day') || currentDate.isAfter(endDate, 'day')
  } catch (error) {
    console.error('日期判断出错:', error)
    return false
  }
}

// 开始时间处理函数
const handleStartTimeOk = async (value: string | undefined) => {
  if (!value) return false

  const selectedTime = dayjs(value)

  // 检查是否晚于结束时间
  if (iteration.value.endTime) {
    const endTime = dayjs(iteration.value.endTime)
    if (selectedTime.isAfter(endTime)) {
      Message.warning('开始时间不能晚于结束时间')
      return false
    }
  }

  // 检查时间是否在允许范围内
  const range = getTimeRange.value
  if (range.start && range.end) {
    const startLimit = dayjs(range.start)
    const endLimit = dayjs(range.end)

    if (selectedTime.isBefore(startLimit) || selectedTime.isAfter(endLimit)) {
      Message.warning('所选时间超出允许范围')
      return false
    }
  }

  // 更新任务开始时间
  updateIterationRequest.value = {
    id: iteration.value.id,
    startTime: dayjs(value).format('YYYY-MM-DDTHH:mm:ss'),
    mileId: -1
  }

  try {
    const res: any = await updateIterationUsingPut(updateIterationRequest.value)
    if (res.code === 0) {
      await getIterationData()
      return true
    } else {
      Message.error(res.message)
      return false
    }
  } catch (error) {
    Message.error('更新失败')
    return false
  }
}

// 截止时间处理函数
const handleEndTimeOk = async (value: string | undefined) => {
  if (!value) return false

  const selectedTime = dayjs(value)

  // 检查是否早于开始时间
  if (iteration.value.startTime) {
    const startTime = dayjs(iteration.value.startTime)
    if (selectedTime.isBefore(startTime)) {
      Message.warning('结束时间不能早于开始时间')
      return false
    }
  }

  // 检查时间是否在允许范围内
  const range = getTimeRange.value
  if (range.start && range.end) {
    const startLimit = dayjs(range.start)
    const endLimit = dayjs(range.end)

    if (selectedTime.isBefore(startLimit) || selectedTime.isAfter(endLimit)) {
      Message.warning('所选时间超出允许范围')
      return false
    }
  }

  // 更新任务结束时间
  updateIterationRequest.value = {
    id: iteration.value.id,
    endTime: dayjs(value).format('YYYY-MM-DDTHH:mm:ss'),
    mileId: -1
  }

  try {
    const res: any = await updateIterationUsingPut(updateIterationRequest.value)
    if (res.code === 0) {
      await getIterationData()
      return true
    } else {
      Message.error(res.message)
      return false
    }
  } catch (error) {
    Message.error('更新失败')
    return false
  }
}

// 修改状态
const handleStatusChange = async (status: number) => {
  // 重置更新请求对象,只保留必要参数
  updateIterationRequest.value = {
    id: iteration.value.id, // 保留迭代ID
    status: status, // 只设置要更新的状态
    mileId: -1
  }

  try {
    const res: any = await updateRequirementUsingPut(updateRequirementRequest.value)
    if (res.code === 0) {
      await getIterationData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  }
}
const initIterationUpdateRequest = () => {
  // 更新updateIterationRequest
  updateIterationRequest.value = {
    id: iteration.value.id,
    title: iteration.value.title,
    description: iteration.value.description,
    remark: iteration.value.remark,
    status: Number(iteration.value.status),
    startTime: iteration.value.startTime,
    endTime: iteration.value.endTime,
    mileId: -1
  }
}
// #endregion

const getEndTimeStatus = (endTime: string | undefined) => {
  if (!endTime) return { color: '', text: '', hint: '' }

  const now = dayjs()
  const end = dayjs(endTime)
  const daysLeft = end.diff(now, 'day')
  const formattedTime = dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')

  if (daysLeft < 0) {
    return {
      color: 'var(--color-danger-light-4)',
      text: formattedTime,
      hint: `已逾期 ${Math.abs(daysLeft)} 天`
    }
  } else if (daysLeft === 0) {
    return {
      color: 'var(--color-danger-light-4)',
      text: formattedTime,
      hint: '今天截止'
    }
  } else if (daysLeft <= 1) {
    return {
      color: 'var(--color-warning-light-4)',
      text: formattedTime,
      hint: '剩余 1 天'
    }
  } else if (daysLeft <= 3) {
    return {
      color: 'var(--color-warning-light-5)',
      text: formattedTime,
      hint: `剩余 ${daysLeft} 天`
    }
  }

  return {
    color: '',
    text: formattedTime,
    hint: ''
  }
}
// #region 附件相关
const attacheList = ref<API.AttachesVo[]>([])
const fileLoading = ref(false)
const hasMoreAttaches = ref(true)
const total = ref(0) // 添加总数记录

const pageAttacheRequest = ref<API.PageAttacheRequest>({
  current: 1,
  pageSize: 5,
  typeId: iteration.value.id as number,
  type: 2
})

// 加载更多文件
const loadMoreAttaches = async () => {
  if (fileLoading.value) return
  fileLoading.value = true

  try {
    pageAttacheRequest.value.typeId = iteration.value.id as number
    const res: any = await pageAttachesUsingPost(pageAttacheRequest.value)
    if (res.code === 0) {
      total.value = res.data.total

      // 如果是第一页，直接赋值
      if (pageAttacheRequest.value.current === 1) {
        attacheList.value = res.data.records
      } else {
        // 否则追加数据
        attacheList.value = [...attacheList.value, ...res.data.records]
      }

      // 判断是否还有更多数据
      hasMoreAttaches.value = attacheList.value.length < total.value

      // 更新页码
      if (hasMoreAttaches.value) {
        pageAttacheRequest.value.current += 1
      }
    } else {
      Message.error(res.message || '获取文件列表失败')
    }
  } finally {
    fileLoading.value = false
  }
}

const addAttacheRequest = ref<API.addAttacheUsingPOSTParams>({
  fileName: '',
  typeId: iteration.value.id as number,
  type: 2
})
// 处理文件上传前的验证
const beforeUpload = (file: File) => {
  const maxSize = 10 * 1024 * 1024 // 10MB
  console.log(file.size)
  if (file.size > maxSize) {
    Message.error('文件大小不能超过10MB')
    return false
  }

  // 设置文件名
  addAttacheRequest.value.fileName = file.name
  return true
}
// 处理文件上传
const handleUpload = async (option: any) => {
  const { fileItem } = option
  try {
    addAttacheRequest.value.fileName = fileItem.file.name
    addAttacheRequest.value.typeId = iteration.value.id as number
    const res: any = await addAttacheUsingPost(addAttacheRequest.value, fileItem.file)

    if (res.code === 0) {
      Message.success('上传成功')
      // 重置并重新加载
      pageAttacheRequest.value.current = 1
      await loadMoreAttaches()
    } else {
      Message.error(res.message || '上传失败')
    }
  } catch (error) {
    Message.error('文件上传失败')
  }
}
//#endregion
// 获取需求相关数据
const getIterationData = async () => {
  if (!props.iterationId) return
  const iterationId = props.iterationId
  const res: any = await getIterationUsingGet({ id: iterationId })
  if (res.code === 0) {
    iteration.value = res.data
    relateMilestoneId.value = res.data.mileId
    initIterationUpdateRequest()
  } else {
    Message.error(res.message)
  }

  await Promise.all([loadMoreAttaches(), getRelatePro(), getRelateMile()])
}
//任务点击事件
const taskDetailVisible = ref(false)
const selectedTask = ref<API.TaskVo | null>(null)
const handleTaskClick = (task: API.TaskVo) => {
  selectedTask.value = task
  taskDetailVisible.value = true
}
//初始化
onMounted(async () => {
  await getIterationData()
  await getProjectMembers()
})
const handleClose = () => {
  emit('update:visible', false)
  emit('close', iteration.value.id as number)
}
</script>

<template>
  <a-modal
    :visible="visible"
    @update:visible="(val) => emit('update:visible', val)"
    @cancel="handleClose"
    modal-class="task-view-modal"
    :footer="false"
    :mask-closable="true"
    draggable
    :fullscreen="fullscreen"
    width="auto"
  >
    <!-- 修改标题栏部分 -->
    <template #title>
      <div class="modal-title" @dblclick="fullscreen = !fullscreen">
        <div class="title-left">
          <a-button type="secondary" size="small" class="project-info">
            <span class="project-name">{{ iteration?.title }}</span>
            <span class="separator">|</span>
            <span class="task-code">{{ iteration?.code }}</span>
          </a-button>
        </div>
        <a-tooltip content="双击头部标题">
          <div class="title-actions">
            <a-button
              type="text"
              size="small"
              @click="fullscreen = !fullscreen"
              :title="fullscreen ? '退出全屏' : '全屏'"
            >
              <template #icon>
                <icon-fullscreen-exit v-if="fullscreen" />
                <icon-fullscreen v-else />
              </template>
            </a-button>
          </div>
        </a-tooltip>
      </div>
    </template>

    <template v-if="iteration">
      <a-row :gutter="32" class="task-view-content" :class="{ 'is-fullscreen': fullscreen }">
        <!-- 左侧内容区 -->
        <a-col :span="fullscreen ? 24 : 24" class="left-content">
          <div class="left-content-scroll">
            <div class="task-header">
              <div
                class="title-wrapper"
                :class="{ 'is-editing': isEditingTitle }"
                @click="startEditTitle"
              >
                <a-input
                  v-if="isEditingTitle"
                  v-model="editedTitle"
                  :default-value="iteration?.title"
                  @blur="handleTitleChange"
                  @keyup.enter="handleTitleChange"
                  class="title-input"
                  :max-length="100"
                  show-word-limit
                />
                <h1 v-else class="task-main-title">
                  {{ iteration.title }}
                </h1>
              </div>

              <!-- 修改任务基本信息行 -->
              <a-row class="task-basic-info">
                <!-- 状态 -->
                <a-col :span="iteration.status === 6 && iteration.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom">
                    <!-- Popover 触发元素 -->
                    <div class="info-item">
                      <component
                        :is="getCompleteIcon(iteration.status)"
                        class="info-icon"
                        :size="32"
                        :style="{ color: getCompleteColor(iteration.status) }"
                      />
                      <div class="info-content">
                        <a-tag :color="getCompleteColor(iteration.status)">
                          {{ getCompleteStatus(iteration.status) }}
                        </a-tag>
                        <span class="info-label">状态</span>
                      </div>
                    </div>

                    <!-- Popover 内容 -->
                    <template #content>
                      <div class="status-list">
                        <div
                          v-for="status in Object.values(COMPLETE_STATUS_CONFIG).filter(
                            (s) => s.value !== 3
                          )"
                          :key="status.value"
                          class="status-item"
                          :class="{ 'is-active': iteration.status === status.value }"
                          @click="
                            iteration.status !== status.value && handleStatusChange(status.value)
                          "
                        >
                          <component :is="status.icon" :style="{ color: status.color }" />
                          <a-tag :color="status.color">
                            {{ status.label }}
                          </a-tag>
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </a-col>

                <!-- 负责人 -->
                <a-col :span="iteration.status === 6 && iteration.completeTime ? 4 : 6">
                  <div class="info-item">
                    <a-avatar :size="32" :image-url="projectOwner?.avatar">
                      {{ projectOwner?.nickname || projectOwner?.username?.charAt(0) }}
                    </a-avatar>
                    <div class="info-content">
                      <span class="info-name">{{
                        projectOwner?.nickname || projectOwner?.username
                      }}</span>
                      <span class="info-label">负责人</span>
                    </div>
                  </div>
                </a-col>

                <!-- 开始时间 -->
                <a-col :span="iteration.status === 6 && iteration.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom">
                    <div class="info-item">
                      <icon-calendar class="info-icon" :size="32" />
                      <div class="info-content">
                        <span class="time">{{
                          dayjs(iteration.startTime).format('YYYY-MM-DD HH:mm:ss')
                        }}</span>
                        <span class="info-label">开始时间</span>
                      </div>
                    </div>

                    <!-- 开始时间选择器 -->
                    <template #content>
                      <div class="date-picker-container">
                        <a-date-picker
                          show-time
                          placeholder="选择开始时间"
                          hide-trigger
                          :default-value="iteration.startTime"
                          :disabled-date="isDateDisabled"
                          @ok="handleStartTimeOk"
                        />
                      </div>
                    </template>
                  </a-popover>
                </a-col>

                <!-- 截止时间 -->
                <a-col :span="iteration.status === 6 && iteration.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom">
                    <div class="info-item">
                      <icon-calendar class="info-icon" :size="32" />
                      <div class="info-content">
                        <span
                          class="time"
                          :style="{
                            color:
                              getEndTimeStatus(iteration.endTime).color || 'var(--color-text-1)'
                          }"
                        >
                          {{ getEndTimeStatus(iteration.endTime).text }}
                          <span v-if="getEndTimeStatus(iteration.endTime).hint" class="time-hint">
                            ({{ getEndTimeStatus(iteration.endTime).hint }})
                          </span>
                        </span>
                        <span class="info-label">截止时间</span>
                      </div>
                    </div>

                    <!-- 结束时间选择器 -->
                    <template #content>
                      <div class="date-picker-container">
                        <a-date-picker
                          show-time
                          placeholder="选择截止时间"
                          hide-trigger
                          :default-value="iteration.endTime"
                          :disabled-date="isDateDisabled"
                          @ok="handleEndTimeOk"
                        />
                      </div>
                    </template>
                  </a-popover>
                </a-col>
              </a-row>
              <a-row class="task-complete-info">
                <!-- 完成时间 -->
                <a-col :span="6" v-if="iteration.status === 4 && iteration.completeTime">
                  <div class="info-item">
                    <icon-check-circle-fill
                      class="info-icon"
                      :size="32"
                      style="color: var(--color-success-light-4)"
                    />
                    <div class="info-content">
                      <span class="time">
                        {{ dayjs(iteration.completeTime).format('YYYY-MM-DD HH:mm:ss') }}
                      </span>
                      <span class="info-label">完成时间</span>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>

            <a-tabs class="task-detail-tabs">
              <a-tab-pane key="details" title="需求详情">
                <template #title>
                  <a-space>
                    <icon-file />
                    需求详情
                  </a-space>
                </template>
                <div class="task-relations">
                  <a-row :gutter="16">
                    <!-- 关联项目 -->
                    <a-col :span="5">
                      <div class="relation-item">
                        <span class="relation-label">关联项目:</span>
                        <span class="relation-content">{{ relatePro?.title || '无' }}</span>
                      </div>
                    </a-col>

                    <!-- 关联里程碑 -->
                    <a-col :span="5">
                      <div class="relation-item">
                        <span class="relation-label">关联里程碑:</span>
                        <a-select
                          v-model="relateMilestoneId"
                          placeholder="选择里程碑"
                          size="small"
                          allow-clear
                        >
                          <a-option
                            v-for="milestone in useableRelateMilestones"
                            :key="milestone.id"
                            :value="milestone.id"
                            :label="milestone.title"
                          >
                            {{ milestone.title }}
                          </a-option>
                        </a-select>
                      </div>
                    </a-col>
                    <a-col :span="2">
                      <div class="relation-item">
                        <span class="relation-label">修改关联</span>
                        <a-button status="warning" size="small" @click="handleChangeRelation">
                          修改
                        </a-button>
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div class="description-wrapper">
                  <div class="section">
                    <div class="section-header">
                      <h3>描述</h3>
                      <div class="section-actions">
                        <a-button
                          type="secondary"
                          size="mini"
                          @click="startEditDescription"
                          v-if="!isEditingDescription"
                        >
                          <template #icon><icon-edit :size="20" /></template>
                        </a-button>
                        <a-button
                          type="secondary"
                          size="mini"
                          v-if="!isEditingDescription"
                          @click="toggleDescriptionFullscreen"
                        >
                          <template #icon>
                            <icon-fullscreen-exit v-if="isDescriptionFullscreen" :size="20" />
                            <icon-fullscreen v-else :size="20" />
                          </template>
                        </a-button>
                      </div>
                    </div>

                    <!-- 查看模式 -->
                    <template v-if="!isEditingDescription">
                      <div
                        v-if="!iteration.description || iteration.description === '<p><br></p>'"
                        class="empty-content"
                      >
                        <span class="empty-text">无</span>
                      </div>
                      <div
                        v-else
                        class="description-wrapper"
                        :class="{ 'is-fullscreen': isDescriptionFullscreen }"
                      >
                        <!-- 退出全屏按钮 -->
                        <div v-if="isDescriptionFullscreen" class="fullscreen-exit-btn">
                          <a-button type="secondary" @click="toggleDescriptionFullscreen">
                            <template #icon><icon-fullscreen-exit :size="20" /></template>
                            退出全屏
                          </a-button>
                        </div>
                        <!-- 描述内容 -->
                        <div
                          class="content-box description-content"
                          v-html="iteration.description"
                        ></div>
                      </div>
                    </template>

                    <!-- 编辑模式 -->
                    <div v-if="isEditingDescription" class="editor-container">
                      <Toolbar
                        style="border-bottom: 1px solid var(--color-border)"
                        :editor="descriptionEditor"
                        mode="default"
                      />
                      <Editor
                        v-model="tempDescription"
                        :default-config="editorConfig"
                        :style="editorStyle"
                        mode="default"
                        @on-created="(editor) => (descriptionEditor = editor)"
                      />
                      <div class="editor-actions">
                        <a-space>
                          <a-button type="outline" @click="cancelEditDescription">取消</a-button>
                          <a-button type="primary" @click="saveDescription">保存</a-button>
                        </a-space>
                      </div>
                    </div>
                  </div>

                  <div class="remark-wrapper">
                    <!-- 原有的备注部分 -->
                    <div class="section">
                      <div class="section-header">
                        <h3>备注</h3>
                        <div class="section-actions">
                          <a-button
                            type="secondary"
                            size="mini"
                            @click="startEditRemark"
                            v-if="!isEditingRemark"
                          >
                            <template #icon><icon-edit :size="20" /></template>
                          </a-button>
                          <a-button
                            type="secondary"
                            size="mini"
                            v-if="!isEditingRemark"
                            @click="toggleRemarkFullscreen"
                          >
                            <template #icon>
                              <icon-fullscreen-exit v-if="isRemarkFullscreen" :size="20" />
                              <icon-fullscreen v-else :size="20" />
                            </template>
                          </a-button>
                        </div>
                      </div>

                      <!-- 查看模式 -->
                      <template v-if="!isEditingRemark">
                        <div
                          v-if="!iteration.remark || iteration.remark === '<p><br></p>'"
                          class="empty-content"
                        >
                          <span class="empty-text">无</span>
                        </div>
                        <div
                          v-else
                          class="remark-wrapper"
                          :class="{ 'is-fullscreen': isRemarkFullscreen }"
                        >
                          <!-- 退出全屏按钮 -->
                          <div v-if="isRemarkFullscreen" class="fullscreen-exit-btn">
                            <a-button type="secondary" @click="toggleRemarkFullscreen">
                              <template #icon><icon-fullscreen-exit :size="20" /></template>
                              退出全屏
                            </a-button>
                          </div>
                          <!-- 备注内容 -->
                          <div class="content-box remark-content" v-html="iteration.remark"></div>
                        </div>
                      </template>

                      <!-- 编辑模式 -->
                      <div v-if="isEditingRemark" class="editor-container">
                        <Toolbar
                          style="border-bottom: 1px solid var(--color-border)"
                          :editor="remarkEditor"
                          mode="default"
                        />
                        <Editor
                          v-model="tempRemark"
                          :default-config="editorConfig"
                          :style="editorStyle"
                          mode="default"
                          @on-created="(editor) => (remarkEditor = editor)"
                        />
                        <div class="editor-actions">
                          <a-space>
                            <a-button type="outline" @click="cancelEditRemark">取消</a-button>
                            <a-button type="primary" @click="saveRemark">保存</a-button>
                          </a-space>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="taskList" title="任务列表">
                <template #title>
                  <a-space>
                    <icon-apps />
                    任务列表
                  </a-space>
                </template>

                <!-- 任务列表内容 -->
                <div class="task-list-container">
                  <a-table
                    :data="iteration?.taskVoList"
                    :pagination="false"
                    :bordered="false"
                    size="small"
                    @row-click="handleTaskClick"
                  >
                    <template #columns>
                      <!-- 任务信息 -->
                      <a-table-column title="任务信息">
                        <template #cell="{ record }">
                          <div class="task-info-cell">
                            <span class="task-title">{{ record.title }}</span>
                            <span class="task-code">{{ record.code }}</span>
                          </div>
                        </template>
                      </a-table-column>

                      <!-- 优先级 -->
                      <a-table-column title="优先级" align="center">
                        <template #cell="{ record }">
                          <a-tag :color="getTaskPriorityColor(record.priority)">
                            {{ getPriorityLabel(record.priority) }}
                          </a-tag>
                        </template>
                      </a-table-column>

                      <!-- 负责人 -->
                      <a-table-column title="负责人" align="center">
                        <template #cell="{ record }">
                          <div class="owner-cell">
                            <a-avatar :size="24" :image-url="record.owner?.avatar">
                              {{ record.owner?.nickname || record.owner?.username?.charAt(0) }}
                            </a-avatar>
                            <span class="owner-name">
                              {{ record.owner?.nickname || record.owner?.username }}
                            </span>
                          </div>
                        </template>
                      </a-table-column>

                      <!-- 时间信息 -->
                      <a-table-column title="时间信息">
                        <a-table-column title="开始时间" align="center">
                          <template #cell="{ record }">
                            {{ dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss') }}
                          </template>
                        </a-table-column>
                        <a-table-column title="截止时间" align="center">
                          <template #cell="{ record }">
                            {{ dayjs(record.endTime).format('YYYY-MM-DD HH:mm:ss') }}
                          </template>
                        </a-table-column>
                      </a-table-column>

                      <!-- 状态 -->
                      <a-table-column title="状态" align="center">
                        <template #cell="{ record }">
                          <a-tag :color="getCompleteColor(record.status)">
                            {{ getCompleteStatus(record.status) }}
                          </a-tag>
                        </template>
                      </a-table-column>
                    </template>
                  </a-table>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
      </a-row>
    </template>
  </a-modal>

  <!-- 预览组件 -->
  <FilePreview v-model:isPreviewOpen="previewVisible" :file="previewFile" @close="closePreview" />

  <!-- 任务详情组件 -->
  <TaskView
    v-if="taskDetailVisible"
    :visible="taskDetailVisible"
    :taskId="selectedTask?.id"
    @update:visible="
      async () => {
        taskDetailVisible = false
      }
    "
  />
</template>

<style scoped>
/* 修改任务视图内容区域样式 */
.task-view-content {
  width: 1480px !important;
  min-width: 480px !important;
  max-width: 1920px !important;
  margin: 0 auto;
  height: 80vh;
  overflow: hidden;
  transition: all 0.1s ease;
}

/* 全屏状态下的样式 */
.task-view-content.is-fullscreen {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 60px) !important; /* 减去标题栏高度 */
}

/* 修改评论区样式，添加过渡效果 */
.comment-col {
  border-left: 1px solid var(--color-border);
  height: 100%;
  transition: all 0.1s ease;
}

.comment-section {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  position: relative;
}

/* 全屏状态下的评论区样式调整 */
.is-fullscreen .comment-section {
  height: calc(100vh - 120px);
}

/* 全屏状态下的动态样式调整 */
.is-fullscreen .dynamics-section {
  height: calc(100vh - 120px);
}
.task-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

/* 修改基本信息行样式 */
.task-basic-info {
  margin-top: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

.task-complete-info {
  margin-top: 16px;
  padding: 16px 0;
}
/* 修改信息项的悬浮样式 */
.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.info-item:hover {
  background-color: var(--color-fill-2);
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 13px;
  color: var(--color-text-3);
}

.info-name,
.time {
  font-size: 14px;
  color: var(--color-text-1);
  line-height: 1.5;
}

.info-icon {
  font-size: 16px;
  color: var(--color-text-2);
}

/* 移除时间信息行相关样式 */
.task-time-info {
  display: none;
}

.section {
  margin-bottom: 12px;
}

.section h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--color-text-1);
  border-left: 3px solid var(--color-primary);
  padding-left: 8px;
}

.content-box {
  /* background-color: var(--color-fill-1); */
  border-radius: 4px;
  padding: 16px;
  min-height: 100px;
  font-size: 14px;
  line-height: 1.5;
  color: #aaaa;
}

/* 修改标题栏样式 */
.modal-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 40px;
}

.title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.project-name {
  color: var(--color-text-3);
}

.separator {
  color: var(--color-text-4);
  margin: 0 2px;
}

.task-code {
  margin-left: 8px;
  font-size: 12px;
  font-weight: normal;
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-1);
  position: relative;
  padding-left: 12px;
}

/* 添加分隔符 */
.task-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 1px;
  background-color: var(--color-border);
}

.title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-actions :deep(.arco-btn) {
  padding: 0 4px;
}

.title-actions :deep(.arco-btn:hover) {
  background-color: var(--color-fill-3);
  border-radius: 4px;
}

/* 修改标题相关样式 */
.title-wrapper {
  position: relative;
  padding: 4px 8px;
  border: none; /* 移除默认边框 */
  border-radius: 4px;
  cursor: text;
  transition: all 0.1s;
}

.title-wrapper:hover {
  background-color: var(--color-fill-1); /* 只保留背景色变化 */
}

.title-wrapper.is-editing {
  background-color: var(--color-bg-1);
}

.task-main-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text-1);
  margin: 0;
  line-height: 1.4;
  min-height: 34px; /* 保持与输入框一致的高度 */
}

/* 修改输入框样式 */
.title-input {
  font-size: 24px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

:deep(.title-input .arco-input-wrapper) {
  padding: 0;
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
}

:deep(.title-input .arco-input-wrapper:hover),
:deep(.title-input .arco-input-wrapper.arco-input-focus) {
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
}

/* 评论列表和输入框样式 */
.comment-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 8px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: column; /* 恢复正常排序 */
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 修改为两端对齐 */
  margin-bottom: 5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px; /* 时间和删除图标的间距 */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  color: var(--color-text-1);
  font-weight: 500;
}

.comment-time {
  color: var(--color-text-3);
  font-size: 12px;
}

.comment-content {
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.comment-input-wrapper {
  flex: 3;
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  background-color: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  padding: 16px;
  z-index: 1; /* 确保输入框在上层 */
}

.comment-input {
  width: 100%;
}

.input-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

/* 自定义滚动条样式 */
.comment-list::-webkit-scrollbar {
  width: 6px;
}
.comment-list::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.dynamics-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.dynamics-list::-webkit-scrollbar {
  width: 6px;
}
.dynamics-list::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.comment-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.task-info-section {
  display: none;
}

/* 响应式布局调整 */
@media screen and (max-width: 1520px) {
  .task-view-content:not(.is-fullscreen) {
    width: 95vw !important;
  }
}

@media screen and (max-width: 1200px) {
  .task-view-content:not(.is-fullscreen) {
    height: auto;
  }

  .comment-col {
    border-left: none;
    border-top: 1px solid var(--color-border);
    margin-top: 24px;
    padding-top: 24px;
  }
}

/* 修改头像样式 */
.info-icon.arco-avatar {
  background-color: var(--color-fill-3);
  color: var(--color-text-2);
  font-size: 16px;
}

/* 修改日期图标样式 */
.date-icon.arco-avatar {
  background-color: var(--color-fill-3);
  color: var(--color-text-2);
  font-size: 16px;
}

/* 空内容样式 */
.empty-content {
  display: flex;
  padding-left: 16px;
  min-height: 80px;
  max-height: 160px;
  border-radius: 4px;
}

.empty-text {
  color: var(--color-text-3);
  font-size: 14px;
}

/* 创建和更新信息样式 */
.info-section {
  margin: 24px 0;
}

.info-row {
  display: flex;
  gap: 32px;
}

.info-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-name {
  font-size: 14px;
  color: var(--color-text-1);
  line-height: 1.5;
}

.info-time {
  font-size: 12px;
  color: var(--color-text-3);
}

/* 描述区域样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.section-actions :deep(.arco-btn) {
  padding: 0 4px;
}

.section-actions :deep(.arco-btn:hover) {
  background-color: var(--color-fill-3);
  border-radius: 4px;
}

.editor-container {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

/* 编辑器操作按钮样式 */
.editor-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  background-color: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
}

/* 编辑器内容区域样式 */
:deep(.w-e-text-container) {
  height: auto !important;
  max-height: 300px !important;
  overflow-y: auto;
}

:deep(.w-e-text-container[contenteditable='true']) {
  min-height: 100px !important;
}

/* 修改编辑器容器样式 */
.editor-container {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

/* 编辑器全屏样式 */
:deep(.w-e-full-screen-container) {
  z-index: 2000 !important; /* 确保高于模态框 */
  position: fixed !important;
  background-color: var(--color-bg-1) !important;
}

:deep(.w-e-full-screen-container .w-e-text-container) {
  max-height: none !important; /* 移除全屏时的高度限制 */
}

/* 工具栏全屏样式 */
:deep(.w-e-toolbar.w-e-full-screen-toolbar) {
  position: fixed !important;
  width: 100% !important;
  z-index: 2001 !important; /* 确保工具栏在最上层 */
}

/* 修改描述内容区域样式 */
.description-content {
  padding: 16px;
  line-height: 1.6;
  color: var(--color-text-1);
  background-color: var(--color-bg-1);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

/* 描述内容的滚动条样式 */
.description-content::-webkit-scrollbar {
  width: 6px;
}

.description-content::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.description-content::-webkit-scrollbar-track {
  background-color: var(--color-fill-1);
  border-radius: 3px;
}

/* 确保段落样式正确 */
.description-content :deep(p) {
  margin: 0;
  padding: 0;
}

.description-content :deep(p:not(:last-child)) {
  margin-bottom: 8px;
}

/* 修改左侧内容区滚动样式 */
.left-content {
  height: 100%;
  overflow: hidden;
}

.left-content-scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 16px;
  /* 隐藏滚动条但保留滚动功能 */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* 隐藏 Webkit 浏览器的滚动条 */
.left-content-scroll::-webkit-scrollbar {
  display: none;
}

/* 确保任务视图内容区域高度正确 */
.task-view-content {
  height: 80vh;
  overflow: hidden;
}

/* 描述容器样式 */
.description-wrapper {
  position: relative;
}

/* 全屏样式调整 */
.description-wrapper.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: var(--color-bg-1);
  padding: 32px;
}

.description-wrapper.is-fullscreen .description-content {
  height: 100%;
  max-height: none;
  border: none;
  padding: 0;
}

/* 全屏退出按钮样式 */
.fullscreen-exit-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2001;
}

.fullscreen-exit-btn :deep(.arco-btn) {
  padding: 4px 12px;
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fullscreen-exit-btn :deep(.arco-btn:hover) {
  background-color: var(--color-fill-2);
}

/* 备注内容样式 */
.remark-content {
  padding: 16px;
  line-height: 1.6;
  color: var(--color-text-1);
  background-color: var(--color-bg-1);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

/* 备注容器样式 */
.remark-wrapper {
  position: relative;
}

/* 备注全屏样式 */
.remark-wrapper.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: var(--color-bg-1);
  padding: 32px;
}

.remark-wrapper.is-fullscreen .remark-content {
  height: 100%;
  max-height: none;
  border: none;
  padding: 0;
}

/* 备注内容的滚动条样式 */
.remark-content::-webkit-scrollbar {
  width: 6px;
}

.remark-content::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.remark-content::-webkit-scrollbar-track {
  background-color: var(--color-fill-1);
  border-radius: 3px;
}

/* 修改状态列表样式 */
.status-list {
  width: 200px;
  padding: 8px;
}

.status-item {
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px; /* 图标和文字的间距 */
}

/* 添加选中状态的样式 */
.status-item.is-active {
  background-color: var(--color-fill-2);
  cursor: default; /* 当前选中项不显示手型光标 */
}

.status-item:hover {
  background-color: var(--color-fill-2);
}

.status-item:active {
  background-color: var(--color-fill-3);
}

/* 添加成员列表样式 */
.member-list {
  padding: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.member-info-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-name {
  font-size: 13px;
  color: var(--color-text-1);
}

.member-item.is-selected {
  background-color: var(--color-primary-light-1);
}

.member-item:hover {
  background-color: var(--color-fill-2);
}

.member-item.is-selected:hover {
  background-color: var(--color-primary-light-2);
}

/* 选中图标样式 */
.member-item :deep(.arco-icon-check) {
  color: var(--color-primary);
  font-size: 14px;
}

.member-username {
  font-size: 12px;
  color: var(--color-text-3);
}

/* 添加日期选择器容器样式 */
.date-picker-container {
  padding: 8px;
}

/* 添加到现有的样式部分 */
.time-hint {
  font-size: 12px;
  margin-left: 4px;
}

/* 添加关联信息样式 */
.task-relations {
  margin: 16px 0;
  padding: 16px;
  background-color: var(--color-fill-1);
  border-radius: 4px;
}

.relation-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relation-label {
  font-size: 13px;
  color: var(--color-text-3);
}

/* 修改选择器样式 */
.relation-item :deep(.arco-select) {
  width: 100%;
}

.relation-item :deep(.arco-select-view) {
  background-color: var(--color-bg-2);
}

.relation-content {
  font-size: 14px;
  color: var(--color-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 添加标签页相关样式 */
.task-detail-tabs {
  margin-top: 16px;
}

:deep(.arco-tabs) {
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

:deep(.arco-tabs-nav) {
  margin-bottom: 16px;
}

.attachments-container {
  min-height: 200px;
}

/* 修改附件面板部分 */
.attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 16px;
}

.attachments-count {
  font-size: 14px;
  color: var(--color-text-2);
}

.add-attachment-btn {
  color: var(--color-primary);
}

.add-attachment-btn:hover {
  color: var(--color-primary-hover);
}
.load-more {
  display: flex;
  justify-content: center;
  padding: 16px 0 0;
}

/* 修改表格相关样式 */
:deep(.arco-table-tr) {
  background-color: var(--color-bg-2);
  border-radius: 4px;
  margin-bottom: 8px;
  height: 56px; /* 限制行高 */
  max-height: 56px;
}

:deep(.arco-table-td) {
  border: none !important;
  padding: 8px 16px !important;
  white-space: nowrap; /* 防止内容换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文件信息单元格样式 */
.file-info-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 200px;
  max-width: 100%;
  overflow: hidden;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.file-name-text {
  color: var(--color-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  color: var(--color-text-3);
  font-size: 13px;
  white-space: nowrap;
}

/* 上传信息单元格样式 */
.upload-info-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 200px; /* 设置最小宽度 */
  overflow: hidden;
}

/* 表格容器样式 */
:deep(.arco-table-container) {
  overflow-x: auto;
  overflow-y: hidden;
}

/* 操作列样式 */
:deep(.arco-table-td:last-child) {
  position: sticky !important;
  right: 0;
  background-color: var(--color-bg-2);
  z-index: 2;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
}

/* 操作列悬浮样式 */
:deep(.arco-table-tr:hover .arco-table-td:last-child) {
  background-color: var(--color-fill-2);
}

/* 右侧标签页样式 */
.comment-col :deep(.arco-tabs) {
  height: 100%;
}

.comment-col :deep(.arco-tabs-content) {
  height: calc(100% - 44px);
  overflow: hidden;
}

.comment-col :deep(.arco-tab-pane) {
  height: 100%;
  position: relative;
}

/* 活动列表样式 */
.dynamics-section {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  position: relative;
}

.dynamics-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 8px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: column; /* 恢复正常排序 */
}

.dynamic-item {
  margin-bottom: 16px;
  padding: 12px;
  background-color: var(--color-fill-1);
  border-radius: 4px;
}
.dynamic-load-wrapper {
  flex: 3;
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  background-color: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  padding: 16px;
  z-index: 1; /* 确保输入框在上层 */
}
.dynamic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dynamic-content {
  color: var(--color-text-2);
  font-size: 14px;
}

.no-dynamics {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-3);
  height: 200px;
}

/* 添加评论工具栏样式 */
.comment-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-btn {
  padding: 4px !important;
  color: var(--color-text-3) !important;
}

.toolbar-btn:hover {
  color: var(--color-text-1) !important;
  background-color: var(--color-fill-2) !important;
}

/* 添加成员列表样式 */
.member-list-container {
  width: 280px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.member-list-header {
  padding: 8px;
  color: var(--color-text-2);
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.member-item:hover {
  background-color: var(--color-fill-2);
}

.member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-name {
  font-size: 14px;
  color: var(--color-text-1);
}

.member-username {
  font-size: 12px;
  color: var(--color-text-3);
}

/* 优化滚动条样式 */
.member-list-container::-webkit-scrollbar {
  width: 6px;
}

.member-list-container::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.member-list-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.comment-files {
  margin-top: 8px;
  padding: 8px;
  background-color: var(--color-fill-1);
  border-radius: 4px;
  max-height: 120px; /* 约等于3个文件项的高度 */
  overflow-y: auto;
}

/* 优化滚动条样式 */
.comment-files::-webkit-scrollbar {
  width: 4px;
}

.comment-files::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 2px;
}

.comment-files::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 调整文件项样式 */
.comment-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: 4px;
  background-color: var(--color-bg-2);
  border-radius: 4px;
  height: 40px; /* 稍微增加高度以适应图片 */
}

.comment-file-item:last-child {
  margin-bottom: 0;
}

.file-icon {
  width: 24px; /* 设置固定宽度，与图片预览保持一致 */
  height: 24px;
  color: var(--color-text-3);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-name {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-icon {
  color: var(--color-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.remove-icon:hover {
  color: var(--color-text-1);
}

/* 修改附件按钮部分 */
.upload-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.upload-tip {
  font-size: 12px;
  color: var(--color-text-3);
  white-space: nowrap;
}

/* 图片预览样式 */
.file-preview-image {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

/* 加载状态样式 */
.comment-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--color-text-3);
}

/* 没有更多数据提示样式 */
.no-more-comment {
  padding: 8px 0;
  color: var(--color-text-3);
  font-size: 13px;
}

/* 评论项样式 */
.comment-item {
  margin-bottom: 12px; /* 减小评论项之间的间距 */
  padding: 8px 12px; /* 减小内边距 */
  border-radius: 4px;
}

/* 评论布局 */
.comment-layout {
  display: flex;
  gap: 5px; /* 减小头像和内容的间距为5px */
}

/* 左侧头像区域 */
.comment-left {
  flex-shrink: 0;
  margin-left: 5px; /* 头像距离左侧边框5px */
}

/* 右侧内容区域 */
.comment-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 每一行内容之间的间距改为5px */
}

/* 头部信息样式 */
.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 修改为两端对齐 */
  margin-bottom: 5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px; /* 时间和删除图标的间距 */
}

.sender-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-2);
}

.send-time {
  font-size: 12px;
  color: var(--color-text-3);
}

.delete-icon {
  font-size: 14px;
  color: var(--color-text-3);
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
}

/* 鼠标悬浮在评论项上时显示删除图标 */
.comment-item:hover .delete-icon {
  opacity: 1;
}

.delete-icon:hover {
  color: var(--color-danger-light-4);
}

/* @用户列表样式 */
.at-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 0; /* 上下间距改为5px */
}

.at-user-tag {
  background-color: var(--color-primary-light-1) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--color-primary-dark-2) !important;
  padding: 2px 10px !important;
  font-size: 13px !important;
  cursor: default;
  transition: all 0.2s ease;
}

.at-user-tag:hover {
  background-color: var(--color-primary-light-2) !important;
}

/* 移除原来的 at-user 样式 */
.at-user {
  display: none;
}

/* 附件列表样式 */
.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 5px; /* 附件之间的间距改为5px */
  margin: 5px 0; /* 上下间距改为5px */
}

.attachment-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
}

/* 文件信息行样式 */
.file-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.file-icon {
  flex-shrink: 0;
  color: var(--color-text-3);
  font-size: 16px;
  margin-top: 2px;
}

.file-name {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-2);
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
  padding-right: 8px;
}

.file-actions {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

/* 图片预览行样式 */
.image-preview-row {
  width: 100%;
  /* display: flex; */
  /* justify-content: flex-start; */
  padding-left: 28px; /* 与文件名对齐 */
}

.preview-image {
  width: 200px; /* 设置预览图片的宽度 */
  height: 150px; /* 设置预览图片的高度 */
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
}

/* Arco Image 组件的预览样式调整 */
:deep(.arco-image) {
  border-radius: 4px;
  overflow: hidden;
}

:deep(.arco-image:hover) {
  opacity: 0.9;
}

/* 任务列表样式 */
.task-list-container {
  /* padding: 16px 0; */
}

.task-item {
  border-radius: 4px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.task-item:hover {
  background-color: var(--color-fill-2);
}

.task-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
}

/* 任务基本信息 */
.task-basic {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.task-title {
  font-weight: 500;
  color: var(--color-text-1);
}

.task-code {
  color: var(--color-text-3);
  font-size: 12px;
  background-color: var(--color-fill-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* 任务信息 */
.task-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 负责人信息 */
.owner-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-name {
  font-size: 13px;
  color: var(--color-text-2);
}

/* 时间信息 */
.time-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-3);
  font-size: 13px;
}

/* 添加优先级标签样式 */
.priority-tag {
  margin-left: 8px;
  font-weight: 500;
}

/* 调整任务基本信息布局 */
.task-basic {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0; /* 允许内容收缩 */
}

.task-title {
  font-weight: 500;
  color: var(--color-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 任务信息单元格样式 */
.task-info-cell {
}

.task-title {
  font-weight: 500;
  color: var(--color-text-1);
}

.task-code {
  color: var(--color-text-3);
  font-size: 12px;
  background-color: var(--color-fill-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* 负责人单元格样式 */
.owner-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.owner-name {
  font-size: 13px;
  color: var(--color-text-2);
}

/* 表格样式调整 */
:deep(.arco-table-th) {
  background-color: var(--color-fill-2);
  font-weight: 500;
}

:deep(.arco-table-tr:hover) {
  background-color: var(--color-fill-1);
  cursor: pointer;
}
</style>
